<template>
    <div id="home">
        <top :navNum = navNum></top>
        <div class="bottom">
            <div class="left" ref='left' style="height:100vh; overflow:hidden;">
                <ul class= "menu"  style="height:110vh;" >
                    <li v-for = "(item,index) in copyList" :key="item.type" @click="navFn(index)">
                        <div>{{item.name}}</div>
                    </li>
                </ul>
            </div>
            <div class="right" ref="imgList" style="height:100vh; overflow:hidden;">
                <div style="height:562vh;">
                    <dl v-for="(item,index) in copyList" :key="item.type" >
                        <dt>
                            <div class="block"></div>
                            <div class="desc" ref="pInfo">{{item.name}}</div>
                        </dt>
                        <dd v-for="food in item.foods" :key="food.name" >
                            <div class='item'>
                                <div class="itemImg" :style= "{'background-image':'url(' + food.image + ')'}"></div>
                                <div class="details">
                                    <div class="title">{{food.name}}</div>
                                    <div class="itemDesc">{{food.description}}</div>
                                    <div class="sale">
                                        <div class='saleNum'>月售{{food.sellCount}}份</div>
                                        <div class='commend'>好评率{{food.rating}}%</div>
                                    </div>
                                    <div class="price">
                                        <div class='newPrice'> <span>&yen;</span> {{food.price}} </div>
                                        <div class='oldPrice' v-if="food.oldPrice">&yen;{{food.oldPrice}} </div>
                                    </div>
                                    <div class='count'>
                                        <span v-if="food.count" class="layout-remove_circle_outline desc" @click="reduceGoods(food)" ></span>
                                        <span v-if="food.count" class="num">{{food.count}}</span>
                                        <span class="layout-add_circle add" @click='addGoods({index,food})'></span>
                                    </div>
                                </div>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <cart :copyList = copyList></cart>
    </div>
</template>

<script>
import {mapState,mapActions} from 'vuex';
import BScroll from 'better-scroll';
export default {
    name: "home",
    data() {
        return{
            navNum:1,
            copyList:[],//转存一份的数据
            shopList:[],//购物车中的数据
        }
    },
    computed:{
        ...mapState(["goodsList"])
    },
    methods:{
        text(y){
            console.log(y);
        },
        ...mapActions(['getGoodsList']),
        //点击将商品信息添加到商品购物车中
        addGoods({index,food}){
            if(food.count){
                food.count++;
            }else{
                this.copyList[index].foods.forEach(item=>{
                    if(item.name === food.name){
                        this.$set(item,'count',1)
                    }
                })
            }
        },
        //商品减一
        reduceGoods(food){
            food.count--;
        },
        //左右侧联动
          navFn(index){
            let scroll = new BScroll(this.$refs.imgList)
            scroll.scrollTo(0,-this.$refs.pInfo[index].offsetTop+1,1000)
            scroll.scrollTo(0,-this.$refs.pInfo[index].offsetTop+1,1000)
        },
    },
    async mounted(){
        //注册事件总线 在购物车组件中使用
        this.$bus.$on('add',this.addGoods);
        this.$bus.$on('reduce',this.reduceGoods);
        //将获取到的list转存一份
        const data = await this.getGoodsList();
        this.copyList = [...data];

        this.$nextTick(()=>{
        let wrapper = new BScroll(this.$refs.left,{
          click:true,
          taps:true
        })
        
        let foodInfo = new BScroll(this.$refs.imgList,{
          click:true,
          taps:true
        })
    })
    }
    }
</script>

<style scoped>
    .bottom{
        display: flex;
        padding-bottom: 96rem;
    }
    .bottom .left ul{
        width: 160rem;
        }
    .bottom .left li{
        height: 108rem;
        background-color: #f3f5f7;
        padding: 0 24rem;
        box-sizing: content-box;
        font-size: 24rem;
        color: rgb(0,0,0);
        font-weight: 200;
        line-height: 28rem;
        display: flex;
        justify-content: left;
        align-items: center;
        border-bottom: 1rem solid rgba(7,17,27,0.1);
        }
    .bottom .right{
            flex: 1;
        }
    .bottom .right dl dt{
        display: flex;
        height: 52rem;
        background-color: #f3f5f7;
        }
    .bottom .right dl dt .block{
            background-color: #d9dde1;
            height: 100%;
            width: 3rem;
        
        }
    .bottom .right dl dt .desc{
        font-size: 24rem;
        margin-left: 28rem;
        color: rgb(147, 153, 159);
            height: 52rem;
            line-height: 52rem;
        }
    .bottom .right dl dd{
            display: flex;
            width: 100%;
        }
    .bottom .right dl dd .item{
        margin: 36rem;
        display: flex;
    }
    .bottom .right dl dd .item .itemImg{
        width: 115rem;
        height: 115rem;
        background-size: cover;
    }
    .bottom .right dl dd .item .details{
        width:400rem;
        margin-left: 20rem;
        position: relative;
    }
    .bottom .right dl dd .item .details .title{
        font-size: 28rem;
        color: rgb(7,17,27);
        line-height: 28rem;
    }
    .bottom .right dl dd .item .details .itemDesc{
        margin: 16rem 0;
        font-size: 20rem;
        color: rgb(147,153,159);
    }
    .bottom .right dl dd .item .details .sale{
        display: flex;
        font-size: 20rem;
        color: rgb(147,153,159);
    }
    .bottom .right dl dd .item .details .sale .saleNum{
        margin-right: 24rem;
    }
    .bottom .right dl dd .item .details .price{
        display: flex;
        font-size: 20rem;
        color: rgb(147,153,159);
        margin-top: 10rem;
    }
    .bottom .right dl dd .item .details .price .newPrice{
        font-size: 28rem;
        margin-right: 24rem;
        color: rgb(240,20,20);
        font-weight: 700;
    }
    .bottom .right dl dd .item .details .price .newPrice span{
            font-size: 20rem;
        }
    .bottom .right dl dd .item .details .price .oldPrice{
        text-decoration: line-through;
    }
    .bottom .right dl dd .item .details .count{
        position: absolute;
        bottom:-20rem;
        right: 20rem;
        display: flex;
        align-items: center;
     }
    .bottom .right dl dd .item .details .desc{
        font-size: 48rem ; 
        color: rgb(0, 160, 220);
        line-height: 48rem;
    }
    .bottom .right dl dd .item .details .add{
        font-size: 48rem ; 
        color: rgb(0, 160, 220);
        line-height: 48rem;
    }
    .bottom .right dl dd .item .details .num{
        font-size: 20rem ; 
        color: rgb(147, 153, 159);
        text-align: center;
        line-height: 48rem;
        margin: 0 24rem;
    }
</style>